Vue.component('tip-dialog',{
    data:function (){
        return {
            pageData:{
                content:'请前往微信公众平台取消授权。',
                btnLeft:'',
                btnRight:'',
                singleBtn:false,//单一按钮
            },

        }
    },
    props:{
        dialogdata:{
            type:Object,
            
        },
        leftbtnhandler:{//接收父组件传递的方法
            type:Function,
            default:null,
        },
        rightbtnhandler:{//
            type:Function,
            default:null,
        }
    },
    template:
            '<div id="tip-dialog">'+
                '<section class="dialog-title">'+
                    '提示 <img src="../img/close.png" @click="close"/>'+
                '</section>'+
                '<section class="dialog-cont">'+
                '<p>{{pageData.content}}</p> '+
                '<div class="dialog-btn" v-if="!pageData.singleBtn">'+
                        '<span style="margin-right:10px" @click="leftHandler">{{pageData.btnLeft}}</span>'+
                        '<span @click="rightHandler">{{pageData.btnRight}}</span>'+
                       
                '</div>'+
                '<div class="singleBtn dialog-btn" v-else>'+
                    '<span>{{pageData.btnCenter}}</span>'+
                '</div>'+
                '</section>'+
            '</div>'
    ,
    created:function(){ 
        
        if(this.dialogdata){
            this.pageData = this.dialogdata;
            console.log(this.dialogdata)
        }
        const head = document.getElementsByTagName('head')[0];
        const css = document.getElementById('dialog_css');
        if(!css){
            const style = document.createElement('style');
            let styleStr=
                '#tip-dialog{'+
                    'width:280px;'+
                    'min-height:100px;'+
                    'background:#fff;'+
                    'position:absolute;'+
                    'top:50%;'+
                    'left:50%;'+
                    'transform:translate(-50%,-50%);'+
                    'border-radius:5px;'+
                    
                '}'+
                '.dialog-title{'+
                    'background:#337ab7;'+
                    'height:30px;'+
                    'line-height:30px;'+
                    'color:#fff;'+
                    'position:relative;'+
                    'padding:0 10px;'+
                    
                '}'+
                '.dialog-title img{'+
                    'position:absolute;'+
                    'right:10px;'+
                    'top:5px;'+
                    'width:20px;'+
                    'height:20px;'+
                    'cursor:pointer;'+
                    'background:#fff;'+
                    'border-radius:50%;'+
                '}'+
                '.dialog-cont{'+
                    'min-height:120px;'+
                    'background:#fff;'+
                    'padding:10px;'+
                    'color:#333333;'+
                    'position:relative;'+
                    'border:1px solid #efefef;'+
                    'border-radius:5px;'+
                '}'+
                '.dialog-btn{'+
                    'text-align:center;'+
                    'position:absolute;'+
                    'bottom:0;'+
                    'left:0;'+
                    'width:100%;'+
                    'padding:10px 0;'+
                '}'+
                '.dialog-btn span{'+
                    
                    'display:inline-block;'+
                    'border:1px solid #337AB7;'+
                    'background:#337AB7;'+
                    'color:#fff;'+
                    'text-align:center;'+
                    'line-height:24px;'+
                    'padding:0 10px;'+
                    'border-radius:5px;'+
                    'cursor:pointer;'+
                '}'

                
            style.innerHTML = styleStr;
            style.id = 'dialog_css'
            head.appendChild(style)
        }
    },
    mounted: function(){
       
        
    },
    methods: {
        close:function(){
            this.$emit('close',false)
        },
        leftHandler:function(){
            if(this.leftbtnhandler){
                this.leftbtnhandler()
            }
        },
        rightHandler:function(){
            if(this.rightbtnhandler){
                this.rightbtnhandler()
            }
        }

    }
})